<template>
	<view class="" style="background-image: linear-gradient(to bottom, #dceaff, #ffffff);">
		<!-- Added gradient here -->
		<z-paging ref="paging" bg-color="#f6f6f6" height="100%" v-model="ordersList" @query="queryList">
			<view class="list" >
				<view v-for="(item,index) in ordersList" :key="index" class="p-[30rpx] mb-[20rpx] bg-[#fff] rounded-[20rpx]" style="padding: 30rpx; margin-bottom: 20rpx; background-color: #fff;border-radius: 20rpx;">
					<view class="list_ordernum">
						<view class="list_ordernumtext">订单编号：{{item.ordernum}}</view>
						<view :style="{'color':item.status == 3 ? '#111':'#C01B31','width':'95rpx' }">{{item.status_text}}
						</view>
					</view>
					<view v-for="(shopitem,shopindex) in item.shopList" :key="shopindex" >
						<van-card >
							<template #thumb>
								<view>
									<van-image radius="10rpx" width="160rpx" height="160rpx" :src="shopitem.image_text" />
								</view>
							</template>
							<template #title>
								<view  style="font-size: 30rpx;font-weight: bold;">{{shopitem.goods_name}}</view>
								<view  style="padding-top: 20rpx; font-size: 30rpx; color: #999; display: flex;justify-content: space-between;align-items: center;">
									<view>￥{{shopitem.price}}</view>
									<view>×{{shopitem.number}}</view>
								</view>
							</template>
						</van-card>
					</view>
					
					<view class="pt-[13rpx] flex justify-between items-center" style="padding-top: 13rpx; display: flex;justify-content: space-between;align-items: center;">
						<view style="text-align: center;font-size: 26rpx; color: #999; margin-top: 23rpx;">
							共{{item.shopList.length}}件商品
						</view>
						<view>
							<text style="font-size: 26rpx;">总金额</text>
							<text style="padding-left: 12rpx;font-size: 36rpx;font-weight: bold;">￥{{item.price}}</text>
						</view>
					</view>
					<view class="list_button list_button_pt">
						<view v-if="item.status == 0 || item.status==6">
							<van-button custom-style="height:70rpx" color="#222222" round plain
								@click="onDelete(item,index)">删除订单</van-button>
						</view>
						<view class="list_button">
							<view class="pl-[20rpx]" v-if="(item.status > 0 && item.status <3)">
								<van-button custom-style="height:70rpx" color="#C01B31" round plain
									@click="onCancel(item,index)">取消订单</van-button>
							</view>
							
						</view>
						<view style="padding-left: 20rpx;" v-if="item.status != 3 && !item.refundStatus">
							<!--<van-button custom-style="height:70rpx" color="#C01B31" round v-if="item.status==0" @click="onPay(item)">立即付款</van-button>-->
							<van-button custom-style="height:70rpx" color="#C01B31" round
								v-if="item.status == 2">等待配送</van-button>
							<van-button custom-style="height:70rpx" color="#C01B31" round v-if="item.status == 3 "
								@click="onTake(item,index)">确认收货</van-button>
							<!--<van-button custom-style="height:70rpx" color="#C01B31" round v-if="item.status == 4"
								@click="toComment(item)">待评价</van-button>-->
						</view>
			
					</view>
				</view>
			</view>
		</z-paging>
				
	</view>

</template>

<script setup>
	import {
		uploadFie,
	} from '@/utils/index.js'
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	import {		
		postfinishOrder,
		postcancelOrder,
		getLSorderList,
		getLSorderDel
	} from "@/api/index.js"

	const active = ref(1);
	const currentPage = ref(1)
	const ordersList = ref([]);
	const paging = ref(null);
	//校圈列表
	const queryList = (pageNo, pageSize) => {
		getOrderData(pageNo)
	}
	
	const getOrderData = (pageNo) => {
		currentPage.value = pageNo;
		const datas = {
			page: currentPage.value,
		};
		getLSorderList(datas).then(res => {
			console.log(datas)
			console.log(res)
			paging.value.complete(res.data.data);
		});
	};
	
	//取消订单
	const onCancel = async (param,index) => {
		console.log(param)
		let note = '真的要取消订单吗？'
		const that = this
		uni.showModal({
			title: '取消订单',
			content: note,
			showCancel: true,
			success: function(res) {
				if (res.confirm) {
					postcancelOrder({
						orderid: param.id,
						typeid: 2
					}).then(res => {
						if (res.code == 1) {
							/*if (that.firstactive != 2) {
								ordersList.value.splice(index, 1);
							} else {
								ordersList.value[index].dele = 2
							}*/
							ordersList.value[index].status  = 6
		
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
						}
						console.log(res)
						console.log(index)
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	
	//收货
	const onTake = async (param,index) => {
		try {
	
			let note = ordersList.value[index].need ? ordersList.value[index].need : ordersList.value[index].name
			const that = this
			console.log(note)
			uni.showModal({
				title: '确认收货',
				content: note,
				showCancel: true,
				success: function(res) {
					if (res.confirm) {
						postfinishOrder({
							orderid: id,
							typeid: typeid
						}).then(res => {
							if (res.code == 1) {
								ordersList.value[index].state = 3
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
							}
			
							console.log(res)
							console.log(index)
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
	
		} catch (error) {
			//TODO handle the exception
		}
	}
	
	/*删除订单*/
	const onDelete=async(item,index)=>{
		try {
			let data={id:item.id,ordernum:item.ordernum}
			let res = await getLSorderDel(data);
			if (res.code == 1) {
				
				uni.showToast({
					title: '删除成功',
					duration: 1000,
				})
				ordersList.value.splice(index, 1);
						
			} else {
				isDisabled.value = false;
				uni.showToast({
					title: res.msg,
					duration: 1000,
				})
			}
		
		} catch (e) {
			//TODO handle the exception
		}
	}
	onShow(() => {
		setTimeout(() => {
			paging.value.refresh();
		}, 500)
	})
	onLoad(() => {
	})
</script>

<style scoped>
	::v-deep .van-card {
		background-color: transparent;
		padding: 0 !important;
	}
	.list{
		padding: 20rpx 30rpx;
	}
	.list_ordernum{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 25rpx;
		font-size: 30rpx;
	}
	.list_ordernumtext{
		font-size: 24rpx;
		color: #999;
	}
	.list_button{
		display: flex;
		justify-content: end;
		align-items: center;
		
	}
	.list_button_pt{
		padding-top: 35rpx;
	}
</style>